import React, { useRef, useLayoutEffect, useState, useEffect } from 'react';
import App from 'app';
import { useTranslation } from 'react-i18next';
import { useParamAsLanguage } from '../../i18n';
import TypeSelection from './sections/type-selection';

import VideoLibrary from './sections/video-library/index';
import classNames from 'classnames';
import useFormStore from 'src/context/usetypeformstore';
import 'react-toastify/dist/ReactToastify.css';
import { ToastContainer } from 'react-toastify';

import {
    useIsXLScreen,
    useMediaQuery,
    useInjectRemovableCSS,
} from 'components/hooks';

import './style.scss';

import '@b-design/scroll/react/horizontal-movement/style.css';

const use1280 = () => {
    return useMediaQuery('(min-width: 1280px)');
};

export default function (props) {
    const pageName = 'home';
    const elRef = useRef();
    const videoLibraryRef = useRef(null);

    const { i18n } = useTranslation();

    const [size, setSize] = useState([0, 0]);

    const isXLScreen = useIsXLScreen();
    const bp = !isXLScreen;

    const state = useFormStore();
    const selectedType = state.selectedType;

    useEffect(() => {
        function updateSize() {
            setSize([window.innerWidth, window.innerHeight]);
        }
        window.addEventListener('resize', updateSize);
        updateSize();

        return () => window.removeEventListener('resize', updateSize);
    }, [window.innerWidth, window.innerHeight, i18n.language]);
    useParamAsLanguage();

    return (
        <div className="smooth-wrapper">
            <div className="smooth-content">
                <main
                    page={pageName}
                    className={classNames('home_page', {
                        'page-language-zh': i18n.language === 'zh',
                    })}
                    ref={elRef}
                >
                    {selectedType != 'all' && (
                        <div className="home_page-left">
                            <TypeSelection
                                addfake={(data, type) => {
                                    // 调用 VideoLibrary 的 addFake 方法
                                    if (
                                        videoLibraryRef.current &&
                                        videoLibraryRef.current.addFake
                                    ) {
                                        videoLibraryRef.current.addFake(
                                            data,
                                            type
                                        );
                                    }
                                }}
                            ></TypeSelection>
                        </div>
                    )}

                    <div
                        className={classNames('home_page-right', {
                            'home_page-right-library': selectedType == 'all',
                        })}
                    >
                        <VideoLibrary ref={videoLibraryRef}></VideoLibrary>
                    </div>

                    <ToastContainer />
                </main>
            </div>
        </div>
    );
}
